<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性操作与自定义属性</title>
    <style>
        .show {
            display: block;
        }
        
        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <button id="btn1">你过来呀</button>
    <button id="btn2" class="hidden">我过来了</button>
    <br>
    <img src="./img/3.png" width="450px" alt="" id="liuxiaolan" love="xiaolanlan" title="全世界最美丽的女人">
</body>

</html>
<script>
    let liuxiaolan = window.document.querySelector('#liuxiaolan');
    // 获取元素的属性 方式一 元素的属性名只能获取html自带属性 无法获取自定义属性
    window.console.log(liuxiaolan.src);
    window.console.log(liuxiaolan.width);
    window.console.log(liuxiaolan.id);
    window.console.log(liuxiaolan.love);
    window.console.log('++++++++++++++++++++++++++');
    // 获取元素的属性 方式二 getAttribute(属性名) 既可以获取html自带属性也可以获取自定义属性
    window.console.log(liuxiaolan.getAttribute('src'));
    window.console.log(liuxiaolan.getAttribute('width'));
    window.console.log(liuxiaolan.getAttribute('id'));
    window.console.log(liuxiaolan.getAttribute('love'));

    liuxiaolan.width = 150;
    liuxiaolan.setAttribute('src', './img/2.png');
    let btn1 = window.document.querySelector('#btn1');
    let btn2 = window.document.querySelector('#btn2');
    let count = 0;
    btn1.onclick = function(params) {
        if (count == 3) {
            // btn.disabled = 'true';
            btn1.setAttribute('disabled', 'true');
            btn1.className = 'hidden';
            btn2.className = 'show';
        }
        liuxiaolan.setAttribute('src', './img/' + ++count + '.png');
    };

    btn2.onclick = function(params) {
        count = 0;
        btn1.className = 'show';
        btn2.className = 'hidden';
        btn1.removeAttribute('disabled');
        liuxiaolan.setAttribute('src', './img/' + ++count + '.png');
    };
</script>